<template>
	<!-- 售后详情 -->
	<view class="container">
		<!-- 标题 -->
		<headTitle title="售后详情" :server="true" :bottomline='true'></headTitle>
		<view class="server flex-column-between bgfff" v-if="desData.aftersalesSn">
			<text class="font32 color333">服务单号:{{ desData.aftersalesSn }}</text>
			<text class="font24 color999">申请时间:2020-02-02</text>
		</view>
		<view class="plan bgfff" v-if="desData.aftersalesSn">
			<view class="font32 color333">当前进度</view>
			<view class="content font26 color999">您已成功发起售后编号:{{ desData.aftersalesSn }}的退款申请，请您留意通话信息,售后专员可能会与您联系。</view>
			<view class="box">
				<view class="flow" v-for="(item, index) in desData.start || []" :key="index">
					<view class="left flex-center-center">
						<view class="line" :class="{'active': !item.s && item.h !== '申请被拒', 'disable': item.h === '申请被拒'}" v-if="index+1 !== desData.start.length"></view>
						<view class="circle" :class="{'active': !item.state && item.hint !== '申请被拒' && num-1 !== index, 'select': num-1 === index, 'disable': item.hint === '申请被拒'}"></view>
					</view>
					<view class="right">
						<view class="name font30 fontb color-ccc" :class="{'color-333': !item.state, 'color-y': !item.state && item.hint === '申请被拒'}">{{ item.hint }}</view>
						<view class="time font24 color999" v-if="!item.state">{{ item.createTime }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="des bgfff" v-if="desData.aftersalesSn">
			<view class="title font34 color333 fontb">问题描述</view>
			<view class="content font32 color666">{{ desData.description }}</view>
		</view>
		<view class="des bgfff" v-if="desData.mark">
			<view class="title font34 color333 fontb">平台留言</view>
			<view class="content app font32 color666">{{ desData.mark }}</view>
		</view>
	</view>
</template>

<script>
import Api from '@/common/api'
import headTitle from '@/components/head-title.vue'
export default {
	data(){
		return {
			desData: {},
			num: 0,
		}
	},
	onLoad(opt) {
		if(opt.id) {
			this.getData(opt.id)
		}
	},
	methods: {
		// 获取数据
		async getData(id) {
			let res = await Api.apiCall('get', Api.order.getMarketDes, { id },true) || {}
			res.start && res.start.map((item, index) => {
				if(item.state === 0) {
					// 最后一个圆圈，指示点
					this.num += 1
				}
				if(res.start.length - 1 !== index) {
					// 因为下边线颜色的原因处理
					item.s = res.start[index+1].state
					item.h = res.start[index+1].hint
				}
			})
			this.desData = res
		}
	},
	components: {
		headTitle
	}
}
</script>

<style lang="scss">
page {
	background-color: #F5F5F5;
}
.server {
	margin-top: 16rpx;
	padding: 48rpx 30rpx;
	height: 186rpx;
}
.plan {
	margin: 16rpx 0;
	padding: 30rpx 30rpx 0;
	.content {
		padding: 20rpx 0;
		line-height: 44rpx;
		border-bottom: 1rpx solid #DDD;
	}
	.box {
		padding: 72rpx 0;
		.flow {
			display: flex;
			.left {
				position: relative;
				width: 24rpx;
				margin: 0 60rpx 0 44rpx;
				.line {
					transform: translateY(10rpx);
					width: 2rpx;
					height: 100%;
					border-left: 2rpx dashed #DDDDDD;
				}
				.active {
					border-left: 2rpx dashed #A66354;
				}
				.disable {
					border-left: 2rpx dashed #EDA325;
				}
				.circle {
					position: absolute;
					top: 5rpx;
					left: 50%;
					transform: translateX(-50%);
					background-color: #DDDDDD;
					width: 24rpx;
					height: 24rpx;
					border-radius: 50%;
					&.active {
						background-color: #A66354;
					}
					&.select {
						background-color: #B3392B;
					}
					&.disable {
						background-color: #EDA325;
					}
				}
			}
			.right {
				margin-bottom: 48rpx;
				width: 630rpx;
				.name {
					line-height: 40rpx;
				}
				.time {
					margin-top: 16rpx;
				}
				.color-ccc {
					color: #CCC;
				}
				.color-333 {
					color: #333;
				}
				.color-y {
					color: #EDA325;
				}
			}
		}
	}
}
.des {
	margin-bottom: 16rpx;
	.title {
		height: 92rpx;
		line-height: 92rpx;
		padding: 0 30rpx;
		border-bottom: 1rpx solid #DDD;
	}
	.content {
		padding: 30rpx;
		min-height: 300rpx;
		line-height: 48rpx;
		&.app {
			height: 248rpx;
			color: #A66354;
		}
	}
}
</style>
